今天我們來看 Routing 路由的部分
在 Client-Side-Rendering (CSR) 的開發中
沒了路由,就像是斷了腿的跑者
由此可見,路由扮演了一個很重要的角色
在 React 中,我們最常使用「react-router-dom」,這個套件進行 React 的路由管理
藉由切換不同路徑,顯示對應的頁面或元件
在此專案也是使用 react-router-dom
在 react-router-dom 裡面提供很多元件
以下簡單介紹幾個常用的
在 lodestar-app 中,是把路由包成一個名為「AppRouter」的元件來使用
被各個 Context 所包覆
首先我們在 AppRouter 中看到有一個「AppRouterContext」,它是用於封裝成一個 custom hook 給其他地方使用
接著是「BrowserRouter」,讓底下所有元件都能使用 router
再來是「QueryParamProvider」,用於各個頁面或是元件可以直接取用URL的參數
最重要的部分來了,AppPage
所有的頁面和元件都會呈現在此
其中比較特別的部分是「Suspense」和「fallback」
這兩個我之前都沒接觸過
Suspense 是 React 提供的特殊元件
當「目標載入元件」還沒載入完成時,React 會顯示 fallback 這個 props 綁定的「讀取元件」,一直到「目標載入元件」載入完成後再切換過來
最後我們看看 Route
它被 AppPage 包著,並且跑「routesMap」這個物件來生成路由
對比一個一個設定,是不是乾淨了許多?
明天我們繼續來看 type 的部分
【Day.24】React效能 - 用lazy和Suspense來動態載入元件